<template>
  <zx-container>
    <template #zx-primary-search>
      <zx-search-form
        v-model:formData="searchParams"
        :formItems="formItems"
        v-model:page="pages.page"
        @search="searchTable"
      />
    </template>
    <template #zx-primary-header>
      <TableTitle :title="activeTitle">
        <el-button
          v-if="activeTab === 'ymyt'"
          type="primary"
          icon="CirclePlus"
          @click="addDomainType"
        >
          新增用途类型
        </el-button>
        <el-button
          v-if="activeTab === 'yxmb'"
          type="primary"
          icon="CirclePlus"
          @click="addEmailTemp"
        >
          新增邮箱模板
        </el-button>
        <el-button
          v-if="activeTab === 'fbggdls'"
          type="primary"
          icon="CirclePlus"
          @click="addProxy"
        >
          新增代理商
        </el-button>
      </TableTitle>
    </template>
    <template #zx-primary-container>
      <zx-table
        ref="tableRef"
        height="100%"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        minWidth="150"
      ></zx-table>
      <zx-pagination
        v-model:page="pages.page"
        v-model:size="pages.per_page"
        :total="total"
        @change="getTableData"
      />
    </template>
  </zx-container>

  <!-- 申请类型编辑 -->
  <ApplyDialog
    v-model:show="showApply_edit"
    :activeRow="activeRow"
    @getTable="searchTable"
  />
  <!-- 业务组编辑 -->
  <BusinessDialog
    v-model:show="showBusiness_edit"
    :activeRow="activeRow"
    @getTable="searchTable"
  />
  <!-- 域名用途编辑 -->
  <DomainDialog
    v-model:show="showDomain_edit"
    :activeRow="activeRow"
    @getTable="searchTable"
  />
  <!-- 用途类型新增 -->
  <DomainTypeDialog
    v-model:show="showDomain_add"
    @reload="searchTable('reset')"
  />
  <!-- 站点类型编辑 因为很多数据字典和它格式一致，所以统一用该组件了 -->
  <SitetypeDialog
    v-model:show="showSitetype_edit"
    :activeRow="activeRow"
    :name="dialogName"
    :dialogInfo="dialogInfo"
    @getTable="searchTable"
  />
  <!-- 邮箱模板新增 -->
  <EmailTempAdd
    v-model:show="showEmailTemp_add"
    :activeType="activeType"
    @reload="searchTable('reset')"
  />
  <!-- 个号类型编辑 -->
  <NumberDialog
    v-model:show="showNumber_edit"
    :activeRow="activeRow"
    @getTable="searchTable"
  />
  <!-- 代理商新增 -->
  <ProxyAdd
    v-model:show="showProxy_add"
    :activeType="activeType"
    @reload="searchTable('reset')"
  />
  <!-- 代理商编辑 -->
  <ProxyEdit
    v-model:show="showProxy_edit"
    :activeRow="activeRow"
    :activeType="activeType"
    @getTable="searchTable"
  />
</template>

<script setup>
import { useTable } from 'zhixin-ui';
import {
  platformBusinessGroupList,
  PlatformSiteTypeList,
  PlatformCompanyDomainUsageList,
  platformApplication_typeList,
  platformFb_account_typeList
} from '@/api/system.js';
import {
  formItems,
  columns,
  searchParams,
  activeRow,
  showApply_edit,
  showBusiness_edit,
  showSitetype_edit,
  showDomain_edit,
  showDomain_add,
  addDomainType,
  showProxy_add,
  addEmailTemp,
  addProxy,
  showEmailTemp_add,
  showProxy_edit,
  dialogName,
  dialogInfo,
  showNumber_edit
} from './tableConst';
import TableTitle from '@/components/TableTitle';
import BusinessDialog from './BusinessDialog';
import SitetypeDialog from './SitetypeDialog';
import DomainDialog from './DomainDialog';
import DomainTypeDialog from './DomainTypeDialog';
import EmailTempAdd from './EmailTempAdd';
import ApplyDialog from './ApplyDialog';
import NumberDialog from './NumberDialog';
import ProxyAdd from './ProxyAdd';
import ProxyEdit from './ProxyEdit';
import { PAGES } from '@/utils/const';

const props = defineProps({
  activeTab: {
    type: [Number, String],
    default: ''
  },
  activeTitle: {
    type: String,
    default: ''
  },
  activeType: {
    type: Object,
    default: undefined
  }
});

// 表格hooks
const tableRef = ref();

const tableOptions = {
  tableRef,
  searchParams,
  autorun: false,
  pages: PAGES(),
  api: getApi()
};
const { loading, tableData, pages, total, getTableData } = useTable(
  null,
  tableOptions
);

watch(
  () => props.activeTab,
  () => {
    tableOptions.api = getApi();
  },
  { immediate: true }
);

// 站点类型会和后面的接口统一
function getApi() {
  return (
    {
      ywz: platformBusinessGroupList,
      ymyt: PlatformCompanyDomainUsageList,
      sqlx: platformApplication_typeList,
      ghlx: platformFb_account_typeList
    }[props.activeTab] || PlatformSiteTypeList
  );
}

function initSearchParams() {
  pages.value.page = 1;
  Object.keys(searchParams).forEach(key => delete searchParams[key]);

  const _activeType = props.activeType;
  if (!_activeType) return;
  searchParams.type = _activeType;
}
function searchTable(type) {
  if (type === 'reset') initSearchParams();
  getTableData();
}
function initTable(keep) {
  if (!keep) initSearchParams();
  getTableData();
}

defineExpose({ initTable });
</script>

<style lang="scss" scoped></style>
